<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Kitchen Sink | Cypress Example">
  <meta name="author" content="Cypress.io">
  <meta name="copyright" content="Cypress.io, Inc">

  <title>Cypress.io: Kitchen Sink</title>

  <link rel="icon" href="/assets/img/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="/assets/css/vendor/bootstrap.min.css">
  <link rel="stylesheet" href="/assets/css/vendor/fira.css">
  <link rel="stylesheet" href="/assets/css/styles.css">
</head>

<body>
  <nav class="navbar navbar-inverse">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">cypress.io</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active" class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Commands <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="/commands/querying">Querying</a></li>
              <li><a href="/commands/traversal">Traversal</a></li>
              <li><a href="/commands/actions">Actions</a></li>
              <li><a href="/commands/window">Window</a></li>
              <li><a href="/commands/viewport">Viewport</a></li>
              <li><a href="/commands/location">Location</a></li>
              <li><a href="/commands/navigation">Navigation</a></li>
              <li><a href="/commands/assertions">Assertions</a></li>
              <li><a href="/commands/misc">Misc</a></li>
              <li><a href="/commands/connectors">Connectors</a></li>
              <li><a href="/commands/aliasing">Aliasing</a></li>
              <li><a href="/commands/waiting">Waiting</a></li>
              <li><a href="/commands/network-requests">Network Requests</a></li>
              <li><a href="/commands/fixtures">Fixtures</a></li>
              <li><a href="/commands/local-storage">Local Storage</a></li>
              <li><a href="/commands/cookies">Cookies</a></li>
              <li class="active"><a href="/commands/spies-stubs-clocks">Spies, Stubs &amp; Clocks</a></li>
            </ul>
          </li>
          <li><a href="/utilities">Utilities</a></li>
          <li><a href="/cypress-api">Cypress API</a></li>
        </ul>
        <ul class="nav navbar-nav pull-right">
          <li><a href="https://github.com/cypress-io/cypress-example-kitchensink">GitHub</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="banner">
    <div class="container">
      <h1>Spies, Stubs &amp; Clocks</h1>
      <p>Examples of using stubs, spies, and controlling clock time - for a full reference of commands, go to <a href="https://on.cypress.io/api" target="_blank">docs.cypress.io</a>
      </p>
    </div>
  </div>
  <div class="container content-container">
    <div id="spies-stubs-clocks">
      <div class="row">

        <div class="col-xs-12">
          <h4 id="spy"><a href="https://on.cypress.io/spy">cy.spy()</a></h4>
          <p>To wrap a method in a spy, use the <a href="https://on.cypress.io/spy"><code>cy.spy()</code></a> command.</p>
          <pre><code class="javascript">const obj = {
  foo () {},
}

const spy = cy.spy(obj, 'foo').as('anyArgs')

obj.foo()

expect(spy).to.be.called</code></pre>
        </div>

        <div class="col-xs-12"><hr></div>

        <div class="col-xs-12">
          <p><a href="https://on.cypress.io/spy"><code>cy.spy()</code></a> retries until the
            assertions that follow it pass.</p>
          <pre><code class="javascript">const obj = {
  foo () {},
}

cy.spy(obj, 'foo').as('foo')

setTimeout(() => {
  obj.foo()
}, 500)

setTimeout(() => {
  obj.foo()
}, 2500)

cy.get('@foo').should('have.been.calledTwice')</code></pre>
        </div>

        <div class="col-xs-12"><hr></div>

        <div class="col-xs-12">
          <h4 id="stub"><a href="https://on.cypress.io/stub">cy.stub()</a></h4>
          <p>To create a stub and/or replace a function with a stub, use the <a href="https://on.cypress.io/stub"><code>cy.stub()</code></a> command.</p>
          <pre><code class="javascript">let obj = {
  foo () {},
}

const stub = cy.stub(obj, 'foo').as('foo')

obj.foo('foo', 'bar')

expect(stub).to.be.called</code></pre>
        </div>

        <div class="col-xs-12"><hr></div>

        <div class="col-xs-7">
          <h4 id="clock"><a href="https://on.cypress.io/clock">cy.clock()</a></h4>
          <p>To control time in the browser, use the <a href="https://on.cypress.io/clock"><code>cy.clock()</code></a> command.</p>
          <pre><code class="javascript">// create the date in UTC so its always the same
// no matter what local timezone the browser is running in
const now = new Date(Date.UTC(2017, 2, 14)).getTime()

cy.clock(now)
cy.visit('http://localhost:8080/commands/spies-stubs-clocks')
cy.get('#clock-div').click()
  .should('have.text', '1489449600')</code></pre>
        </div>
        <div class="col-xs-5">
          <div class="well">
            <div id="clock-div">
              Click for current time!
            </div>
          </div>
        </div>

        <div class="col-xs-12"><hr></div>

        <div class="col-xs-7">
          <h4 id="tick"><a href="https://on.cypress.io/tick">cy.tick()</a></h4>
          <p>To move time in the browser, use the <a href="https://on.cypress.io/tick"><code>cy.tick()</code></a> command.</p>
          <pre><code class="javascript">// create the date in UTC so its always the same
// no matter what local timezone the browser is running in
const now = new Date(Date.UTC(2017, 2, 14)).getTime()

cy.clock(now)
cy.visit('http://localhost:8080/commands/spies-stubs-clocks')
cy.get('#tick-div').click()
  .should('have.text', '1489449600')
cy.tick(10000) // 10 seconds passed
cy.get('#tick-div').click()
  .should('have.text', '1489449610')</code></pre>
        </div>
        <div class="col-xs-5">
          <div class="well">
            <div id="tick-div">
              Click for current time!
            </div>
          </div>
        </div>

        <div class="col-xs-12"><hr></div>
        <div class="col-xs-7">
          <h4 id="stub-arguments">cy.stub() matches depending on arguments</h4>
          <p>See all possible matchers at <a href="https://sinonjs.org/releases/latest/matchers/">Sinonjs.org</a></p>
          <pre><code class="javascript">const greeter = {
  /**
    * Greets a person
    * @param {string} name
  */
  greet (name) {
    return `Hello, ${name}!`
  },
}

cy.stub(greeter, 'greet')
  .callThrough() // if you want non-matched calls to call the real method
  .withArgs(Cypress.sinon.match.string).returns('Hi')
  .withArgs(Cypress.sinon.match.number).throws(new Error('Invalid name'))

expect(greeter.greet('World')).to.equal('Hi')
expect(() => greeter.greet(42)).to.throw('Invalid name')
expect(greeter.greet).to.have.been.calledTwice

// non-matched calls goes the actual method
expect(greeter.greet()).to.equal('Hello, undefined!')</code></pre>
        </div>

        <div class="col-xs-12"><hr></div>
        <div class="col-xs-7">
          <h4 id="matchers">matches call arguments using Sinon matchers</h4>
          <p>See all possible matchers at <a href="https://sinonjs.org/releases/latest/matchers/">Sinonjs.org</a></p>
          <pre><code class="javascript">const calculator = {
  /**
    * returns the sum of two arguments
    * @param a {number}
    * @param b {number}
  */
  add (a, b) {
    return a + b
  },
}

const spy = cy.spy(calculator, 'add').as('add')

expect(calculator.add(2, 3)).to.equal(5)

// if we want to assert the exact values used during the call
expect(spy).to.be.calledWith(2, 3)

// let's confirm "add" method was called with two numbers
expect(spy).to.be.calledWith(Cypress.sinon.match.number, Cypress.sinon.match.number)

// alternatively, provide the value to match
expect(spy).to.be.calledWith(Cypress.sinon.match(2), Cypress.sinon.match(3))

// match any value
expect(spy).to.be.calledWith(Cypress.sinon.match.any, 3)

// match any value from a list
expect(spy).to.be.calledWith(Cypress.sinon.match.in([1, 2, 3]), 3)

// expect the value to pass a custom predicate function
// the second argument to "sinon.match(predicate, message)" is
// shown if the predicate does not pass and assertion fails
const isEven = (x) => x % 2 === 0

expect(spy).to.be.calledWith(Cypress.sinon.match(isEven, 'isEven'), 3)

// you can combine several matchers using "and", "or"
const isGreaterThan = (limit) => (x) => x > limit
const isLessThan = (limit) => (x) => x < limit

expect(spy).to.be.calledWith(
  Cypress.sinon.match.number,
  Cypress.sinon.match(
    isGreaterThan(2), '> 2').and(Cypress.sinon.match(isLessThan(4), '< 4'))
)

expect(spy).to.be.calledWith(
  Cypress.sinon.match.number,
  Cypress.sinon.match(isGreaterThan(200), '> 200').or(Cypress.sinon.match(3))
)

// matchers can be used from BDD assertions
cy.get('@add').should('have.been.calledWith',
  Cypress.sinon.match.number, Cypress.sinon.match(3)
)

// you can alias matchers for shorter test code
const { match: M } = Cypress.sinon

cy.get('@add').should('have.been.calledWith', M.number, M(3))</code></pre>
        </div>
      </div>
    </div>
  </div>

  <script src="/assets/js/vendor/jquery-1.12.0.min.js"></script>
  <script src="/assets/js/vendor/bootstrap.min.js"></script>
  <script src="/assets/js/vendor/highlight.pack.js"></script>
  <script src="/assets/js/scripts.js"></script>
</body>
</html>
